<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/bootstrap.css">
    <script src="./js/jquery.js"></script>
    <script src="./js/bootstrap.js"></script>
    <style>
        .formdiv {
            position: fixed;
            width: 40vw;
            height: 50vh;
            margin-top: 10vh;
            margin-left: 30vw;
            border: #4d4d4d solid 1px;
            border-radius: 4px;
            box-shadow: 5px 5px 5px #4d4d4d;
        }
    </style>
</head>

<body>
    <div class="formdiv">
        <div class="row">
            <h3 style="text-align: center;padding-bottom: 5vh;">
                管理员登录
            </h3>
        </div>
        <form class="form-horizontal">
            <div class="form-group">
                <div class="col-sm-offset-3 col-sm-6">
                    <input type="text" class="form-control" id="inputText3" placeholder="用户名">
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-offset-3 col-sm-6">
                    <input type="password" class="form-control" id="inputPassword3" placeholder="密码">
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-offset-3 col-sm-6" style="padding-top: 20px;">
                    <input type="button" class="btn btn-primary btn-lg btn-block" id="login" value="登录"></input>
                </div>
            </div>
        </form>
    </div>
    <div class="modal fade" tabindex="-1" role="dialog" id="loginmodel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">提示</h4>
                </div>
                <div class="modal-body">
                    <p></p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary">确定</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
    <script>
        $(".btn-primary").click(()=>{
            $("#loginmodel").modal("hide");
        })
        $(() => {
            $("#login").click(() => {
                $.ajax({
                    url: "http://192.168.96.193:8033/user/login",
                    type: "post",
                    data: {
                        "user_name": $('#inputText3').val(),
                        "password": $('#inputPassword3').val()
                    },
                    success: function (res) {
                        $(".modal-body").children("p").replaceWith(res)
                        if (res == $('#inputText3').val() + " 用户登录成功,欢迎您！") {
                            setTimeout(() => {
                                window.location.href = "./index.html"
                            }, 900);
                        }
                        $("#loginmodel").modal("toggle");
                    }
                })

            })
        })
    </script>
</body>

</html>